<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <link rel="stylesheet" href="/css/newsContent.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>


    <script>
        $(function () {




            //获取当前登录的用户
            var user = JSON.parse(sessionStorage.getItem("user"));

            var currentPage = 1;
            //总页数  用来判断是否是最后一页
            var pages = 2;
            //[] 数组,一个容器 将每次拉倒底部查询的每页数据 数组都存放在里面
            var travelData = [];
            //变量表示 当前页是否已经在查询中 如果是 则不再查询,避免ajax的异步请求发送重复
            var loading = false;//

            var params = getParams();
            if (params.id) {
                $.get('/strategies/' + params.id + '/comment', {currentPage: currentPage}, function (data) {
                    $(".container").renderValues(data, {
                        'getStar': function (item, value) {
                            //拼接所有评论的星级标签
                            var temp = "";
                            //对得到的starNum进行循环,拼出评论的星数
                            for (var i = 0; i < 5; i++) {
                                //如果i小于当前查询出来星数,则应该是实心星星
                                if (i < value) {
                                    temp += "<i class='fa fa-star'></i>";
                                } else {//否则空心 星星
                                    temp += '<i class="fa fa-star-o"></i>';
                                }
                            }
                            //将拼接的星星结果标签元素,拼接到指定位置
                            $(item).append(temp);
                        },
                        'userId': function (item, value) {
                            var url = $(item).data('url');
                            $(item).attr('href', url + value);
                        },
                        'strategyId': function (item, value) {
                            var url = $(item).data('url');
                            $(item).attr('href', url + value);
                        }
                    })
                    //给图片绑定事件
                    $(".comment-img img").click(function () {
                        var url = $(this).attr("src");
                        $(document).dialog({
                            titleShow: false,
                            overlayClose: true,
                            content: '<img src="' + url + '" width="100%"/>'
                        });
                    });
                })

                //获取我的游记数据
                function query() {
                    //如果当前为正在查询 则说明ajax已经发送 不需要重复发送
                    if (loading) {
                        return;
                    }
                    //每次在发送ajax前,将查询状态改为正在查询,
                    loading = true;

                    //发送请求查询当前攻略 的 评论信息
                    $.get('/comments/strategy', {
                        type: 1,
                        answer_id: params.id,
                        currentPage: currentPage
                    }, function (data) {
                        //设置评论数量
                        $(".spanCommentNum").html(data.total);
                        //将查询出来的需要的数据的数组放到容器中
                        $.merge(travelData, data.list);
                        //渲染数据
                        $("#display").renderValues({list: travelData}, {
                            'getReplyId': function (item, value) {
                                $(item).attr('data-id', value);
                            },
                            getId: function (item, value) {
                                $(item).attr("data-id", value);
                            },
                            'getCommentId': function (item, value) {
                                $(item).attr('data-id', value);
                            },

                            'getTargetId': function (item, value) {
                                $(item).attr('data-id', value);
                            }
                        });


                        //评论的点击
                        $(".CommentBtn").click(function () {
                            if (!user) {
                                $(document).dialog({
                                    type: 'confirm',
                                    closeBtnShow: false,
                                    content: '请登录',
                                    onClickConfirmBtn: function () {
                                        location.href = "/login.html"
                                    }
                                })
                            } else {
                                $("#CommentModal input").val("")
                                $("#CommentModal").modal('show')
                            }
                        });

                        //点击回复的点击
                        $(".reply_Bth").click(function () {
                            $("#ReplyModal input").val("")
                            if (!user) {
                                $(document).dialog({
                                    type: 'confirm',
                                    closeBtnShow: false,
                                    content: '请登录',
                                    onClickConfirmBtn: function () {
                                        location.href = "/login.html"
                                    }
                                })
                            } else {
                                //获取当前comment的id
                                var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                                console.log(commentId);
                                //设置回复人的id为当前登录的用户
                                $("#replyUserId").val(user.id);
                                //设置评论id
                                $("#commentId").val(commentId);
                                //设置目标人的id
                                var targetId = $(this).data("id");
                                console.log(targetId);
                                $("#targetUserId").val(targetId);


                                $("#ReplyModal").modal('show')
                            }
                        });
                        //点击回复人的昵称显示模态框进行回复
                        $(".replyUserNickName").click(function () {
                            $("#ReplyModal input").val("")
                            //如果登录了可以回复
                            if (!user) {
                                $(document).dialog({
                                    type: 'confirm',
                                    closeBtnShow: false,
                                    content: '请登录',
                                    onClickConfirmBtn: function () {
                                        location.href = "/login.html"
                                    }
                                })
                            }
                            console.log($(this));
                            //获取当前comment的id
                            var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                            console.log(commentId);
                            //设置回复人的id为当前登录的用户
                            $("#replyUserId").val(user.id);
                            //设置评论id
                            $("#commentId").val(commentId);
                            //设置目标人的id
                            var targetId = $(this).closest(".replydiv").find("a.replyUserNickName").data("id");
                            console.log(targetId);
                            $("#targetUserId").val(targetId);


                            $("#ReplyModal").modal("show");
                        });

                        //点击被回复人的昵称显示模态框进行回复
                        $(".targetUserNickName").click(function () {
                            $("#ReplyModal input").val("")
                            //如果登录了可以回复
                            if (!user) {
                                $(document).dialog({
                                    type: 'confirm',
                                    closeBtnShow: false,
                                    content: '请登录',
                                    onClickConfirmBtn: function () {
                                        location.href = "/login.html"
                                    }
                                })
                            }
                            //获取当前comment的id
                            var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                            console.log(commentId);
                            //设置回复人的id为当前登录的用户
                            $("#replyUserId").val(user.id);
                            //设置评论id
                            $("#commentId").val(commentId);
                            //设置目标人的id
                            var targetId = $(this).data("id");
                            console.log(targetId);
                            $("#targetUserId").val(targetId);


                            $("#ReplyModal").modal("show");
                        })


                        //当前页加1 下次将查询第二页数据
                        currentPage += 1;
                        //总页数
                        pages = data.pages;
                        //查询请求结果,则将查询状态改为 不在查询中
                        loading = false;
                    });
                }


                //默认的第一次查第一页数据
                query();

                //给window绑定滚动事件,当window滚动式,调用其中的函数
                $(window).scroll(function () {
                    //判断是否滚动到底部(屏幕高度+HTML滚动超出顶部的高度>=HTML文档的高度)
                    if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                        //滚动到当前文档底部,并且是否还有页数可以显示 有则继续查询出来显示
                        if (currentPage <= pages) {
                            query();
                            //滚动到底部时,如果此时还有页数 弹出加载中信息
                            $(document).dialog({
                                type: 'notice',
                                infoText: '加载中',
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        } else {
                            //滚动到当前文档底部,如果已经是最后一页 则弹出已经到底
                            $(document).dialog({
                                type: 'notice',
                                infoText: '亲,已经到底了',
                                autoClose: 1500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }

                });


            }
            $(".strategyDetailSubmitBtn").click(function () {
                var content = $("#commentForm input[name='content']").val();
                $.post('/comments/strategy', {
                    'commenter.id': user.id,
                    answer_id: params.id,
                    type: 1,
                    content: content
                }, function (data) {
                    location.reload();
                });

            });

            $(".replyFormSubmitBtn").click(function () {
                $("#replyForm").ajaxSubmit(function (data) {
                    if (data.success) {
                        $(document).dialog({
                            type: 'alert',
                            closeBtnShow: false,
                            content: '评论成功',
                        })
                        setTimeout(function () {
                            location.reload();
                        }, 500);
                    }
                })

            });

        })
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">


    <div class="container ">
        <div class="row">
            <div class="col-3 comment-head">
                <a data-url="/userProfiles.html?id=" render-key="author.id"
                   render-fun="userId">
                    <img class="rounded-circle" render-src="author.headImgUrl" style="width: 50px">
                    &nbsp;&nbsp;
                    <span render-html="author.nickName" style="width: 20px"/>
                </a>
                <br>

            </div>
            <div class="col">
                <span class="comment-star" render-key="starNum" render-fun="getStar">

                </span>

                <span class="comment-date" render-html="createTime"></span>
                <div class="comment-content">
                    <p render-html="content"></p>
                </div>
                <ul class="comment-img" render-loop="imgArr">
                    <li>
                        <img render-src="imgArr.self">
                    </li>
                </ul>

                <div class="comment-link">
                    <a data-url="/strategyCatalogs.html?id=" render-key="strategy.id"
                       render-fun="strategyId">
                        <img render-src="strategy.coverUrl"> <span render-html="strategy.title"></span>
                        <i class="fa fa-angle-right fa-2x"></i>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2">评论<span class="spanCommentNum"></span></div>
    </div>

</div>

<!--<div id="display">
    <div render-loop="list">
        <div class="commentBox">
            <div class="row">
                <div class="col-2 comment-head">
                    <a data-href="/userProfiles.html?id=">
                        <img render-src="list.commenter.headImgUrl" class="rounded-circle" style="width: 40px">
                    </a>
                </div>
                <div class="col">
                    &lt;!&ndash;当前评论的id&ndash;&gt;
                    <input type="hidden" render-key="list.id" render-fun="getCommentId" class="listComment">
                    <a class="commenter" render-html="list.commenter.nickName" id="listCommentUserName"></a>
                    <a class="comment-date time" render-html="list.createtime"></a>
                    <a class="reply_Bth" render-key="list.commenter.id" render-fun="getId" style="color: #6273D2">回复</a>
                    <br>&nbsp;&nbsp;&nbsp;
                    <span class="content" id="replyContent" render-html="list.content"></span>
                    <div render-loop="list.commentOfAlls">
                        <div>
                            <a role="button" render-html="list.commentOfAlls.replyer.nickName" style="color: darkblue"
                               class="replyUserNickName"
                               render-key="list.commentOfAlls.replyer.id" render-fun="getReplyId"></a>
                            回复: <a role="button" render-html="list.commentOfAlls.byreplyerr.nickName"
                                   class="targetUserNickName"
                                   render-key="list.commentOfAlls.byreplyerr.id" render-fun="getTargetId"></a>
                            <a class="comment-date time" render-html="list.commentOfAlls.createtime"></a>
                            <br>&nbsp;
                            <span render-html="list.commentOfAlls.content"></span>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>-->
<!--<div class="userComment">
    <div render-loop="list">
        &lt;!&ndash;user信息&ndash;&gt;
        <div>
            <a href="/user/?id=47949308" class="cl_ava" >
                <img style="width: 30px" render-src="list.commenter.headImgUrl">
            </a>

            <a href="/user/?id=47949308" style="font-size: small" render-html="list.commenter.nickName"></a>
            <span render-html="list.createTime"></span>
            <div class="cl_con">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span render-html="list.content"></span>
                <a class="replyBtn" style="font-size: xx-small" render-key="list.json" render-fun="getJsonHref" >回复</a>
            </div>
            &lt;!&ndash;二级回复&ndash;&gt;
            <div render-loop="list.commentOfAlls">
                <div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span render-html="list.replyUserComments.createTime"></span><br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &lt;!&ndash;回复人头像&ndash;&gt;
                    <a data-href="/userProfiles.html?id=" render-key="list.commentOfAlls.replyer.id" render-fun="getHref">
                        <img style="width: 15px" render-src="list.commentOfAlls.replyer.headImgUrl">
                    </a>
                    &lt;!&ndash;回复人姓名&ndash;&gt;
                    <a data-href="/userProfiles.html?id=" render-key="list.commentOfAlls.replyer.id" render-fun="getHref"
                       render-html="list.commentOfAlls.replyer.nickName">
                    </a>
                    <span style="font-size: xx-small" >回复</span>
                    &lt;!&ndash;被复人头像&ndash;&gt;
                    <a data-href="/userProfiles.html?id=" render-key="list.commentOfAlls.byreplyerr.id" render-fun="getHref" >
                        <img style="width: 15px" render-src="list.commentOfAlls.byreplyerr.headImgUrl">
                    </a>
                    &lt;!&ndash;被复人姓名&ndash;&gt;
                    <a  data-href="/userProfiles.html?id=" render-key="list.commentOfAlls.byreplyerr.id" render-fun="getHref"
                        render-html="list.commentOfAlls.byreplyerr.nickName"></a> :
                    <span render-html="list.commentOfAlls.content"></span>
                    &nbsp;&nbsp;
                    &lt;!&ndash;回复按钮&ndash;&gt;
                    <a render-key="list.commentOfAlls.json" render-fun="getJsonHref"   style="font-size: xx-small" >回复</a>
                </div>
            </div>
        </div>
    </div>
</div>-->


<div id="display" class="container">
    <div render-loop="list"><!--快来发表你的评论吧-->
        <div class="row">
            <a data-href="/userProfiles.html?id=">
                <img class="rounded-circle" render-src="list.commenter.headImgUrl" style="width: 40px">
            </a>
            <div class="col mysss">
                <a render-key="list.id" render-fun="getCommentId" class="listComment" >
                </a>
                <a style="font-size: 20px;color: #545b62" class="replyBtn" render-html="list.commenter.nickName"></a>
                <span class="comment-date" render-html="list.createtime"></span>
                <a class="reply_Bth oneReplyBtn" render-key="list.commenter.id" render-fun="getId">
                    回复
                </a>
                <p render-html="list.content"></p>

                <!--二级评论-->
                <div id="commentReply">
                    <div render-loop="list.commentOfAlls">
                        <div class="replydiv">
                            <a  style="color: #545b62" class="replyUserNickName"
                                render-html="list.commentOfAlls.replyer.nickName"
                                render-key="list.commentOfAlls.replyer.id" render-fun="getReplyId">
                            </a>
                            回复:
                            <a  style="color: #545b62" class="byreplyerrNickName targetUserNickName"
                                render-html="list.commentOfAlls.byreplyerr.nickName"
                                render-key="list.commentOfAlls.byreplyerr.id" render-fun="getTargetId">
                            </a>
                            <span class="comment-date" render-html="list.commentOfAlls.createtime"></span><br>
                            <span name="content" render-html="list.commentOfAlls.content"></span>
                        </div>
                    </div>
                </div>
                <hr/>
            </div>
        </div>
    </div>
</div>


<div class="operation">
    <div class="d-flex justify-content-between CommentBtn">
        <div class="p-2"><i class="fa fa-commenting-o"></i> 添加你的评论</div>
        <!--<div class="p-2"><i class="fa fa-star-o"></i> 收藏</div>-->
    </div>
</div>


<!--评论模态框-->
<div class="modal fade" id="CommentModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">评论</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="" method="post" id="commentForm">
                    <input type="hidden" name="commenter.id"/><!--评论人Id-->
                    <input type="hidden" name="answer_id"/><!--评论的文章id-->
                    <input type="hidden" name="type"/><!--评论的类型-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary strategyDetailSubmitBtn">评论</button>
            </div>
        </div>
    </div>
</div>

<!--回复模态框-->
<div class="modal fade" id="ReplyModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">回复</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/comments/strategy/reply" method="post" id="replyForm">
                    <input type="hidden" id="replyUserId" name="replyer.id"/><!--评论人Id-->
                    <input type="hidden" id="targetUserId" name="byreplyerr.id"/><!--被评论人Id-->
                    <input type="hidden" id="commentId" name="comment_id"/><!--这条评论的id-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary replyFormSubmitBtn">评论</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>